<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.global.js"></script>
    <style>
        input {
            padding: 5px;
            outline: none;
            margin-bottom: 5px;
            border: 1px solid green;
        }

        button {
            padding: 10px;
            font-size: 10px;
        }

        table {
            border-collapse: collapse;
            width: 50%;
        }

        th,
        td {
            border: 1px solid darkgreen;
            text-align: center;
            padding: 5px;
        }

        th {
            font-size: 25px;
        }

        caption {
            font-size: 40px;
            margin: 10px 0;
        }

        section{
            display: none;
        }

        @media print {
            
            #app > main {
                display: none;
            }
            #app >section {
                display: block;
            }

            @page{
                size: A5 landscape;
            }

        }

    </style>
</head>

<body>

    <div id="app">

        <main>

                <form ref="frm">

            <div>
                <input type="text" v-model="row.name" ref="inputname" placeholder="name">

            </div>
            <div>
                <input type="text" v-model="row.unit" placeholder="unit">

            </div>
            <div>
                <input type="text" v-model.number="row.price" placeholder="price">

            </div>
            <div>
                <input type="text" v-model.number="row.total" placeholder="total">

            </div>
            <div>
                <input type="text" v-model="row.totalprice" placeholder="totalprice">

            </div>

        </form>

        <div>
            <button @click="add">TEST</button>
        </div>

        <div>
            <table>
                <caption>数据展示</caption>
                <thead>
                    <th v-for="(value, key) in rows[0]" :key="key">
                        {{ key }}
                    </th>
                </thead>
                <tbody>

                    <tr v-for="(item,index) in rows" :key=index>
                        <td v-for="(value, key) in item" :key="key">
                            {{ value }}
                        </td>
                    </tr>

                </tbody>

            </table>
        </div>
        </main>

        <section>
             <table>
                <caption>数据展示</caption>
                <thead>
                    <th v-for="(value, key) in rows[0]" :key="key">
                        {{ key }}
                    </th>
                </thead>
                <tbody>

                    <tr v-for="(item,index) in rows" :key=index>
                        <td v-for="(value, key) in item" :key="key">
                            {{ value }}
                        </td>
                    </tr>

                </tbody>

            </table>
        </section>
    

    </div>

  


    <script>

        const { createApp, reactive, ref, onMounted,computed } = Vue
        createApp({
            setup() {

                const row = reactive({

                    name: "",
                    price: "",
                    unit: "",
                    total: "",
                    totalprice:""

                });

                const inputname = ref(null);
                const frm = ref(null)
                const rows = reactive([]);
                const add = () => {


                    rows.push({ ...row })
                    for(let key in row){
                        row[key] = ""
                    }
                    inputname.value.focus()


                };

                const tp = computed(()=>{

                    return row.total*row.price
                })

                onMounted(() => {

                    
                })

                return {

                    row,
                    rows,
                    inputname,
                    frm,
                    add,
                    tp
                };
            }
        }).mount('#app');



    </script>

</body>

</html>